<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-form [formGroup]="formGroup" class="formGroup aui-gutter-column-xxl">
  <lv-form-item>
    <lv-form-label lvRequired>
      {{ 'common_name_label' | i18n }}
    </lv-form-label>
    <lv-form-control  [lvErrorTip]="nameErrorTip">
      <input lv-input type="text" formControlName="name" />
    </lv-form-control>
  </lv-form-item>
  <lv-form-item>
    <lv-form-label>
      {{ 'common_desc_label' | i18n }}
    </lv-form-label>
    <lv-form-control>
      <lv-input-lint>
        <textarea
          name="maxlength"
          rows="3"
          maxlength="255"
          lv-input
          formControlName="desc"
        ></textarea>
      </lv-input-lint>
    </lv-form-control>
  </lv-form-item>
  <lv-form-item>
    <lv-form-label>
      {{ 'common_period_label' | i18n }}
    </lv-form-label>
    <lv-form-control>
      <div class="radio">
        <lv-radio-group formControlName="triggerCycle" [lvGroupName]="'typeGroup'">
          <lv-group [lvGutter]="'24px'">
            <lv-radio [lvValue]="dataMap.timeType.day.value">
              {{ 'common_by_day_upper_label' | i18n }}
            </lv-radio>
            <lv-radio [lvValue]="dataMap.timeType.week.value">
              {{ 'common_by_week_label' | i18n }}
            </lv-radio>
          </lv-group>
        </lv-radio-group>
      </div>
    </lv-form-control>
  </lv-form-item>
  <lv-form-item>
    <lv-form-label lvRequired>
      {{ 'protection_frequency_label' | i18n }}
    </lv-form-label>
    <lv-form-control>
      <ng-container
        *ngIf="formGroup.value.triggerCycle === dataMap.timeType.week.value"
      >
        <lv-select
          [lvOptions]="daysOfWeekOptions"
          formControlName="frequency"
          lvValueKey="value"
          lvMode="multiple"
          lvShowFilter
          lvShowCheckAll
          lvFilterKey="label"
          lvFilterMode="contains"
        ></lv-select>
      </ng-container>
      <ng-container *ngIf="formGroup.value.triggerCycle === dataMap.timeType.day.value">
        <input lv-input type="text" formControlName="day" />
      </ng-container>
    </lv-form-control>
  </lv-form-item>
  <lv-form-item>
    <lv-form-label lvRequired>
      <span> {{ 'common_replication_time_window_label' | i18n }}</span>
      <i
        lv-icon="aui-icon-help"
        lv-tooltip="{{ 'common_airgap_replication_time_tips_label' | i18n }}"
        lvTooltipTheme="light"
        class="configform-constraint"
        lvColorState="true"
      ></i>
    </lv-form-label>
    <lv-form-control>
      <div formArrayName="periods">
        <div
          [formGroupName]="i"
          *ngFor="let item of periods; let i = index"
          class="aui-gutter-column-sm"
        >
          <lv-group class="lv-group-flex-start" lvGutter='4px'>
            <lv-form-control>
              <lv-select
              [lvOptions]="timeOfDayOptions"
              formControlName="startTime"
              lvValueKey="value"
            ></lv-select>
            </lv-form-control>
            <span class="time-window-label">
              {{ 'common_to_label' | i18n }}
            </span>
            <lv-form-control>
              <lv-select
              [lvOptions]="timeOfADayOptions"
              formControlName="endTime"
              lvValueKey="value"
            ></lv-select>
            </lv-form-control>
            <span
              (click)="removeRow(i)"
              *ngIf="periods.length > 1"
              class="interval"
            >
              <i
                lv-icon="aui-icon-remove"
                class="remove-target-host-container"
              ></i>
            </span>
          </lv-group>
        </div>
      </div>
      <span
        [ngClass]="{
          'aui-link': periods.length < 3,
          'aui-link-disabled': periods.length === 3
        }"
        (click)="addTime()"
      >
        <i lv-icon="aui-icon-create"></i>
        {{ 'common_add_label' | i18n }}
      </span>
    </lv-form-control>
  </lv-form-item>
</lv-form>


